import loadingUrl from "@/assets/loading.svg";
import styles from "./loading.module.less";

//导出指令配置对象
export default function (el, binding) {
    //根据binding.value的值决定创建或删除img元素
    const isImg = isExists(el);
    if (binding.value) {
        if (!isImg) {
            //创建img元素
            const img = createImg();
            el.appendChild(img);
        }
    } else {
        if(isImg){
            isImg.remove();
        }
    }
}


//判定el中有没有loading指令创建的img元素
function isExists(el) {
    return el.querySelector("img[data-role=loading]");
}

//创建img元素
function createImg() {
    var img = document.createElement('img');
    img.src = loadingUrl;
    img.dataset.role = "loading";
    img.className = styles.loading;
    return img;
}